<template>
    <div class="wrapper">
        <div class="showImageWrapper">
            <div class="currentImage">
                <img :src="designItem.image.url+`?imageView2/1/w/${Math.round(designItem.width*300/1000)}/h/${Math.round(designItem.height*300/1000)}`"
                />
            </div>
        </div>

        <div class="fields">
            <div class="fieldItem">
                <div class="title">标题</div>
                <div class="input">
                    <input type="text" placeholder="title" @change="change_title"
                           :value="getStore('design.designItem').title"/>
                </div>
            </div>
            <div class="fieldItem">
                <div class="title">标签（最多6个）</div>
                <div class="input input_tags">
                    <div class="flow_tags_wrapper">
                        <SvgIcon
                                v-if="!click_add_target_status"
                                icon="icon-plus" @click.native="click_add_target"></SvgIcon>
                        <div class="add_tags_inpout_wrapper"
                             v-if="click_add_target_status"
                        >
                            <input type="text" @keyup.enter="sure_add_tag"></input>
                        </div>
                        <div class="tag" v-for="(item,key) in getStore('design.designItem').tags"
                             :key="key"
                        >
                            {{item}}
                            <SvgIcon class="icon-close" icon="icon-close" @click.native="closetag(item)"></SvgIcon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fieldItem">
                <div class="title">产品分类（最多3个）</div>
                <div class="input types">
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="品味生活"/>品味生活
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="时尚美"/>时尚美
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="新潮范"/> 新潮范
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="孩童"/>孩童
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="少女"/>少女
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="花花世界"/>花花世界
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="动物园"/> 动物园
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="简约"/>简约
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="复古"/>复古
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="大自然"/>大自然
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="未来主义"/>未来主义
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="大胆不羁"/>大胆不羁
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="异域风情"/> 异域风情
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="插画"/>插画
                    </div>
                    <div class="inputItem">
                        <input type="checkbox" name="types" value="摄影"/>摄影
                    </div>
                </div>
            </div>

            <div class="wrapper-publishbtn">
                <div class="publishbtn" @click="publish">发布</div>
                <div>
                    (时间稍长，请稍等片刻)
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import withStore from "../../vuex/withStore";
    import {px2rem} from "../../utils/dom";
    import SvgIcon from '../../components/svgIcon'
    import MyAlert from "../../utils/myalert";
    import {addDesign} from "./service";

    export default withStore({
        components: {
            SvgIcon
        },
        data() {
            var image = this.getStore("design.designItem").image
            return {
                click_add_target_status: false,
                designItem: this.getStore("design.designItem")
            }
        },
        created() {
        },
        mounted() {
            var self = this;
            if (!this.designItem.image) {
                this.$router.replace("/design/upload")
            }
            var typesCheckbox = document.querySelectorAll('[type="checkbox"]');
            var types = self.getStore("design.designItem", true).types
            /*初始化 checkbox*/
            types.map(item => {
                var _index = -1
                for (var i = 0; i < typesCheckbox.length; i++) {
                    var checboxDom = typesCheckbox[i]
                    if (checboxDom.value == item) _index = i
                }
                if (_index >= 0) {
                    typesCheckbox[_index].checked = true
                }
            })
            for (var i = 0; i < typesCheckbox.length; i++) {
                var item = typesCheckbox[i]
                item.onchange = (e) => {
                    var types = self.getStore("design.designItem", true).types
                    if (e.target.checked) {
                        // add
                        if (types.length < 3) {
                            types.push(e.target.value)
                            self.setStore("design.designItem",
                                {... self.getStore("design.designItem"), types})
                        } else {
                            e.target.checked = false
                        }
                    } else {
                        // delete
                        var index = types.findIndex(_type => _type == e.target.value)
                        if (index >= 0) {
                            types.splice(index, 1)
                            self.setStore("design.designItem",
                                {... self.getStore("design.designItem"), types})
                        }
                    }

                }
            }
        },
        methods: {
            publish() {
                var self = this
                var designItem = this.getStore("design.designItem")
                if (!designItem.image.url) {
                    MyAlert.fail("没有上传图片")
                    return false
                }
                if (!designItem.title) {
                    MyAlert.fail("名字不能为空")
                    return false
                }
                if (designItem.types.length == 0) {
                    MyAlert.fail("产品分类至少选一个")
                    return false
                }
                MyAlert.loading()
                addDesign(designItem).then(result => {
                    MyAlert.close()
                    MyAlert.success("发布成功")
                    self.setStore("design.designItem", require("../../vuex/model/designItem").default)
                    self.$router.replace(`/product/${result.objectId}`)
                }).catch(e => {
                    MyAlert.close()
                    MyAlert.fail(e)
                })
            },
            change_title(e) {
                var title = e.target.value
                this.setStore("design.designItem", {...this.getStore("design.designItem"), title})
            },
            click_add_target() {
                this.click_add_target_status = true
            },
            sure_add_tag(e) {
                var tags = this.getStore("design.designItem").tags
                tags.push(e.target.value)
                this.setStore("design.designItem", {...this.getStore("design.designItem"), tags})
                this.$data.click_add_target_status = false
            },
            closetag(_tag) {
                var tags = this.getStore("design.designItem").tags
                var index = tags.findIndex(item => item == _tag)
                if (index >= 0) {
                    tags.splice(index, 1)
                }
                this.setStore("design.designItem", {...this.getStore("design.designItem"), tags})
            }
        },
    })
</script>
<style lang="less" scoped>
    .wrapper {
        margin-bottom: 20px;
        .showImageWrapper {
            position: relative;
            height: 300px;
            width: 100%;
            .currentImage {
                position: absolute;
                top: px2rem(0);
                left: px2rem(70);
                height: 300px;
                width: 300px;
                border: 2px dashed #eee;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .iconImage {
                position: absolute;
                top: px2rem(150);
                left: px2rem(150);
                height: 300px;
                width: 300px;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }

        }

        .fields {
            margin-top: 20px;
            .fieldItem {
                margin-top: 10px;
                border-bottom: 1px solid #eee;
                padding-left: px2rem(20);
                padding-right: px2rem(20);
                .title {
                    font-weight: 500;
                }
                .input {
                    height: px2rem(80);
                    display: flex;
                    align-items: center;
                    input[type='text'] {
                        width: 100%;
                        height: px2rem(60);
                        border: none;
                    }
                }
                .input_tags {
                    height: auto;
                    margin-top: 10px;
                    .flow_tags_wrapper {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-bottom: 20px;
                        .tag {
                            min-width: px2rem(100);
                            margin-bottom: 5px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: #eee;
                            border-radius: 5px;
                            margin-left: px2rem(20);
                            .icon-close {
                                margin-left: 5px;
                            }
                        }
                    }
                    .add_tags_inpout_wrapper {
                        input {
                            width: 100px;
                            height: 15px;
                            padding: 0;
                            margin: 0;
                            font-size: 15px;
                            border: 1px solid #eee;
                            background: #eee;
                        }
                    }
                }
                .types {
                    height: auto;
                    margin-bottom: 10px;
                    flex-wrap: wrap;
                    .inputItem {
                        margin-top: 5px;
                        width: 100px;
                        text-align: left;
                        input[type='checkbox'] {
                            &:first-child {
                                margin-left: 0px
                            }
                        }
                    }
                }

            }
        }

        .wrapper-publishbtn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        .publishbtn {
            width: 100px;
            height: 25px;
            color: #fff;
            background: orangered;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }
</style>